<template>
	<view>
		<van-nav-bar title="新增意向学员" left-text="返回" @click-left="back" left-arrow custom-style="padding-top:0">
		</van-nav-bar>
		<van-cell-group title="必填">
			<van-field required :value="info.real_name" label="姓名" placeholder="请输入姓名" input-align="right"
				icon-class="demo-icon" @change="saveInfo('real_name', $event)" />
			<van-cell required title="性别" is-link clickable :value="info.sex_name" @click="onshowSexPopup">
			</van-cell>
			<van-field required :value="info.phone_num" input-align="right" label="手机号" maxlength="11" type="number"
				placeholder="请输入手机号" :border="false" @change="saveInfo('phone_num', $event)" />
			<van-cell required title="地区" is-link clickable :value="address_area" @click="onshowAreaPopup" />
			<van-field required :value="info.addressDetail" label="详细地址" placeholder="请输入地址" input-align="right"
				icon-class="demo-icon" @change="saveInfo('addressDetail', $event)" />
		</van-cell-group>
		<van-cell-group title="选填">
			<van-field :value="info.id_card" label="身份证号" type="idcard" maxlength="18" placeholder="请输入身份证号"
				input-align="right" icon-class="demo-icon" @change="saveInfo('id_card', $event)" />
		</van-cell-group>
		<wrap>
			<button class="submit-button" :class="isDisable ? '' : 'disabled'" @click="onSubmit">
				提交
			</button>
		</wrap>
		<!-- 性别弹窗 -->
		<van-popup :show="showSexPopup" @close="onClose" position="bottom" closeable custom-style="height: 20%;">
			<van-radio-group :value="sex">
				<van-cell-group title="选择性别">
					<van-cell title="男" :border="false" clickable data-value="M" @click="onChangeSex"
						custom-style="text-align:center">
						<!-- <van-radio name="M" /> -->
					</van-cell>
					<van-cell title="女" :border="false" clickable data-value="F" @click="onChangeSex"
						custom-style="text-align:center">
						<!-- <van-radio name="F" /> -->
					</van-cell>
				</van-cell-group>
			</van-radio-group>
		</van-popup>
		<!-- 省市区弹窗 -->
		<van-popup :show="showAreaPopup" @close="onClose" position="bottom" custom-style="height: 45%;">
			<van-area :value="areaList" :area-list="areaData" @confirm="onConfirm" @cancel="onCancel" />
		</van-popup>
		<van-notify id="van-notify" />
		<van-toast id="van-toast"></van-toast>
	</view>
</template>

<script>
	import areaData from "@/common/area.js";
	import {
		stu_addStu
	} from "@/api/studentList";
	export default {
		data() {
			return {
				real_name: "", //姓名
				info: {
					real_name: "", //姓名
					sex_name: "请选择性别", //性别
					sex: "", //性别编码
					phone_num: "", //手机号
					addressDetail: "", //详细地址
					id_card: "", //身份证号
					ethnic: "",
					remark: "",
				},
				showSexPopup: false, //展示性别弹窗
				isDisable: true, // 是否可以提交
				showAreaPopup: false, //展示地区弹窗
				areaData, //省市区数据
				areaList: [],
				// 验证规则
				rules: {
					real_name: {
						isrequired: true,
						name: "姓名",
					},
					sex: {
						isrequired: true,
						name: "性别",
					},
					phone_num: {
						isrequired: true,
						name: "手机号",
					},
					address: {
						isrequired: true,
						name: "地区",
					},
					addressDetail: {
						isrequired: true,
						name: "详细地址",
					},
					id_card: {
						isrequired: false,
						name: "身份证号",
					},
				},
			};
		},
		computed: {
			address_area() {
				if (this.areaList.length > 0) {
					return Array.from(
						new Set(this.areaList.map((item) => item.name))
					).join();
				}
				return "请选择地区";
			},
		},
		methods: {
			//保存输入内容
			saveInfo(key, e) {
				this.info[key] = e.detail;
			},
			// 返回
			back() {
				uni.navigateBack();
			},
			// 性别
			onChangeSex(e) {
				const {
					value
				} = e.currentTarget.dataset;
				this.info.sex = value;
				this.info.sex_name = value === "M" ? "男" : "女";
				//选择后关闭性别
				this.showSexPopup = false;
			},
			// 展示弹窗
			onshowSexPopup() {
				this.showSexPopup = true;
			},
			// 关闭弹窗
			onClose() {
				this.showSexPopup = false;
				this.showAreaPopup = false;
			},
			// 展示地区弹窗
			onshowAreaPopup() {
				this.showAreaPopup = true;
			},
			// 选择地区确定
			onConfirm(event) {
				const {
					values
				} = event.detail;
				this.areaList = values;
				this.onClose();
			},
			onCancel() {
				this.onClose();
			},
			// 提交
			async onSubmit() {
				const body = {
					...this.info,
					address: this.address_area,
				};
				console.log(body);
				if (this.testReuls(body, this.rules)) {
					//验证通过
					// 发起请求
					let res = await stu_addStu(body);
					// console.log(res);
					if (res.success) {
						this.$toast({
							type: "success",
							message: "添加成功",
							timeout: 1000,
							onClose: () => {
								uni.redirectTo({
									url: "../studentList/studentList",
								});
							},
						});
					}
				}
			},
			testReuls(data, rules) {
				for (const item in rules) {
					//   验证必填
					if (rules[item].isrequired && this.$validator.isEmpty(data[item])) {
						this.$toast.fail(`请输入${rules[item].name}`);
						return false;
					}
					// 验证身份证正则
					if (
						!this.$validator.isEmpty(data["id_card"]) &&
						!this.$validator.isIdentityCard(data["id_card"], "zh-CN")
					) {
						this.$toast.fail(`身份证号格式有误`);
						return false;
					}
					// 验证手机号正则
					if (!this.$validator.isMobilePhone(data["phone_num"], "zh-CN")) {
						this.$toast.fail(`手机号格式有误`);
						return false;
					}
				}
				return true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
